<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('评论管理')" />
    <style>
      /* 隐藏模态框底部的确定按钮 */
      .layui-layer-btn {
        display: none !important;
      }
      /* 调整模态框内容区域的底部边距 */
      .layui-layer-content {
        padding-bottom: 0 !important;
      }
    </style>
  </head>
  <body class="gray-bg">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12 search-collapse">
          <form id="formId">
            <input type="hidden" name="dynamicId" th:value="${dynamicId}" />
            <div class="select-list">
              <ul>
                <li>
                  <label>用户名：</label>
                  <input type="text" name="username" />
                </li>
                <li>
                  <label>审核状态：</label>
                  <select name="auditFlag">
                    <option value="">所有状态</option>
                    <option value="0">待审核</option>
                    <option value="1">审核通过</option>
                    <option value="2">审核拒绝</option>
                  </select>
                </li>
                <li>
                  <a
                    class="btn btn-primary btn-rounded btn-sm"
                    onclick="searchComments()"
                    ><i class="fa fa-search"></i>&nbsp;搜索</a
                  >
                  <a
                    class="btn btn-warning btn-rounded btn-sm"
                    onclick="resetComments()"
                    ><i class="fa fa-refresh"></i>&nbsp;重置</a
                  >
                </li>
              </ul>
            </div>
          </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
          <a
            class="btn btn-success multiple disabled"
            onclick="batchAudit(1)"
            shiro:hasPermission="hui:interact:graphic:audit"
          >
            <i class="fa fa-check"></i> 批量通过
          </a>
          <a
            class="btn btn-warning multiple disabled"
            onclick="batchAudit(2)"
            shiro:hasPermission="hui:interact:graphic:audit"
          >
            <i class="fa fa-times"></i> 批量拒绝
          </a>
          <a
            class="btn btn-danger multiple disabled"
            onclick="$.operate.removeAll()"
            shiro:hasPermission="hui:interact:graphic:remove"
          >
            <i class="fa fa-remove"></i> 批量删除
          </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
          <table id="bootstrap-table"></table>
        </div>
      </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
      //<![CDATA[
      var removeFlag = /*[[${@permission.hasPermi('hui:interact:graphic:remove')}]]*/ false;
      var auditFlag = /*[[${@permission.hasPermi('hui:interact:graphic:audit')}]]*/ false;
      var prefix = ctx + "hui/interact/graphic";
      var dynamicId = /*[[${dynamicId}]]*/ 0;
      //]]>

      $(function () {
        var options = {
          url: prefix + "/comments/list",
          removeUrl: prefix + "/comment/remove",
          modalName: "评论",
          search: false,
          queryParams: function (params) {
            return {
              pageNum: params.offset / params.limit + 1,
              pageSize: params.limit,
              dynamicId: dynamicId,
              username: $("input[name='username']").val(),
              auditFlag: $("select[name='auditFlag']").val(),
            };
          },
          columns: [
            {
              checkbox: true,
            },
            {
              field: "id",
              title: "编号",
            },
            {
              field: "username",
              title: "用户名",
            },
            {
              field: "content",
              title: "评论内容",
              formatter: function (value, row, index) {
                return value.length > 100
                  ? value.substring(0, 100) + "..."
                  : value;
              },
            },
            {
              field: "commentTime",
              title: "评论时间",
              sortable: true,
            },
            {
              field: "auditFlag",
              title: "审核状态",
              formatter: function (value, row, index) {
                if (value == "0") {
                  return '<span class="label label-warning">待审核</span>';
                } else if (value == "1") {
                  return '<span class="label label-success">审核通过</span>';
                } else if (value == "2") {
                  return '<span class="label label-danger">审核拒绝</span>';
                }
                return '<span class="label label-default">未知</span>';
              },
            },
            {
              title: "操作",
              align: "center",
              formatter: function (value, row, index) {
                var actions = [];

                actions.push(
                  '<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="auditComment(\'' +
                    row.id +
                    '\', 1)"><i class="fa fa-check"></i> 通过</a> '
                );
                actions.push(
                  '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="auditComment(\'' +
                    row.id +
                    '\', 2)"><i class="fa fa-times"></i> 拒绝</a> '
                );

                actions.push(
                  '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.remove(\'' +
                    row.id +
                    '\')"><i class="fa fa-remove"></i> 删除</a>'
                );

                return actions.join("");
              },
            },
          ],
        };
        $.table.init(options);
      });

      function auditComment(id, flag) {
        var msg =
          flag == 1
            ? "确定要通过此评论的审核吗？"
            : "确定要拒绝此评论的审核吗？";
        $.modal.confirm(msg, function () {
          $.operate.post(prefix + "/comment/audit/" + id + "/" + flag);
        });
      }

      // 批量审核评论
      function batchAudit(auditFlag) {
        var rows = $.table.selectColumns("id");
        if (rows.length == 0) {
          $.modal.alertWarning("请至少选择一条记录");
          return;
        }

        var msg =
          auditFlag == 1
            ? "确定要批量通过选中的评论吗？"
            : "确定要批量拒绝选中的评论吗？";
        var action = auditFlag == 1 ? "通过" : "拒绝";

        $.modal.confirm(msg, function () {
          var ids = rows.join(",");
          $.ajax({
            url: prefix + "/comment/batchAudit",
            type: "POST",
            data: {
              ids: ids,
              auditFlag: auditFlag,
            },
            success: function (result) {
              if (result.code == web_status.SUCCESS) {
                $.modal.msgSuccess("批量" + action + "成功");
                $.table.refresh();
              } else {
                $.modal.alertError(result.msg);
              }
            },
          });
        });
      }

      // 搜索评论
      function searchComments() {
        $("#bootstrap-table").bootstrapTable("refresh");
      }

      // 重置搜索
      function resetComments() {
        $("input[name='username']").val("");
        $("select[name='auditFlag']").val("");
        $("#bootstrap-table").bootstrapTable("refresh");
      }
    </script>
  </body>
</html>
